<template>
  <div class="login-form-wrap">
    <Title />
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      label-width="auto"
      :rules="rules"
    >
      <el-form-item prop="username">
        <el-input
          v-model="loginForm.username"
          prefix-icon="User"
          placeholder="请输入你的用户名"
        />
      </el-form-item>
      <el-form-item prop="password">
        <el-input
          type="password"
          v-model="loginForm.password"
          prefix-icon="Lock"
          show-password
          placeholder="请输入你的密码"
        />
      </el-form-item>
      <el-form-item>
        <el-row style="width: 100%" justify="space-between">
          <el-col :span="12">
            <el-checkbox v-model="loginForm.autoLogin">自动登录</el-checkbox>
          </el-col>
          <el-col :span="12" style="text-align: right">
            <el-link :underline="false">忘记密码</el-link>
          </el-col>
        </el-row>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          class="login-button"
          @click="handleLogin(loginFormRef)"
          >登录</el-button
        >
      </el-form-item>
      <el-form-item>
        <div class="login-way">
          <div class="other-way">
            <span>其他登录方式</span>
            <GithubIcon />
            <FacebookIcon />
          </div>
          <el-link :underline="false" @click="emit('toRegistry')"
            >注册账号</el-link
          >
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { ref, reactive } from "vue";
import GithubIcon from "@/components/GithubIcon/index.vue";
import FacebookIcon from "@/components/FacebookIcon/index.vue";
import Title from "./Title.vue";

import { ElMessage, FormRules, FormInstance } from "element-plus";
import { useUserStore } from "@/store/user";
import { useRouter } from "vue-router";

interface ILoginForm {
  username: string;
  password: string;
  autoLogin: boolean;
}
const store = useUserStore();
const router = useRouter();
// 表单实例
const loginFormRef = ref<FormInstance>();
// 表单校验
// TODO: 后续可以完善用户名密码校验规则
const rules = reactive<FormRules<ILoginForm>>({
  username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});
// 表单数据
const loginForm = reactive<ILoginForm>({
  username: "admin",
  password: "123456",
  autoLogin: true,
});
const emit = defineEmits<{
  toRegistry: [];
}>();
const handleLogin = async (formRef: FormInstance | undefined) => {
  if (!formRef) return;
  formRef.validate((valid) => {
    if (valid) {
      const { username, password } = loginForm;
      store.userLogin(username, password).then(() => {
        router.replace("/");
        ElMessage.success("登录成功");
      });
    }
  });
};
</script>

<style lang="less" scoped>
.login-form-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 16px 20px;
  height: inherit;
  box-sizing: border-box;
  background-color: #fff;

  .login-button.el-button {
    width: 100%;
  }

  .login-way {
    display: flex;
    width: 100%;
    justify-content: space-between;

    .other-way {
      display: flex;
      align-items: center;

      > span {
        margin-right: 4px;
      }

      svg + svg {
        margin-left: 8px;
      }
    }
  }
}
</style>
